<template>
  <div
    class="row items-center edit-line"
    @mouseover="isHover = true"
    @mouseout="isHover = false"
  >
    <q-separator class="col q-mx-md" v-show="isHover" />
    <div class="row q-gutter-x-sm" v-show="isHover">
      <q-btn
        padding="sm"
        flat
        :label="$t('profile.edit')"
        icon="mdi-pencil"
        color="accent"
        size="md"
        no-caps
      >
        <q-menu auto-close>
          <q-list dense>
            <q-item>
              <q-item-section>
                <q-radio
                  dense
                  keep-color
                  v-model="currentSectionType"
                  val="recent"
                  :label="$t('profile.recentUploads')"
                  color="white"
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-radio
                  dense
                  keep-color
                  v-model="currentSectionType"
                  val="popular"
                  :label="$t('profile.popularUploads')"
                  color="white"
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-radio
                  dense
                  keep-color
                  v-model="currentSectionType"
                  val="videos"
                  :label="$t('profile.myVideos')"
                  color="white"
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-radio
                  dense
                  keep-color
                  v-model="currentSectionType"
                  val="audios"
                  :label="$t('profile.myAudios')"
                  color="white"
                />
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>
                <q-radio
                  dense
                  keep-color
                  v-model="currentSectionType"
                  val="playlist"
                  :label="$t('profile.singlePlaylist')"
                  color="white"
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-radio
                  dense
                  v-model="currentSectionType"
                  val="playlists"
                  :label="$t('profile.multiplePlaylists')"
                  color="white"
                />
              </q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
      <q-btn
        padding="sm"
        flat
        :label="$t('profile.remove')"
        icon="mdi-close"
        color="negative"
        size="md"
        no-caps
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isHover = ref(false);
const currentSectionType = ref('recent');
</script>
<style lang="scss" scoped>
.edit-line {
  .btn {
    background-color: black;
    padding: 4px 8px 4px 4px;
    height: 28px;
  }
}
</style>
